<template>
	<!-- pages/sort/sort.wxml -->
	<view class="page">
		<view class="searchBar algin">
			<view @tap="search" class="search-input">
				<image style="width: 30px; height: 30px; vertical-align: middle; margin-right: 10rpx"
					src="/static/file/images/search.png"></image>
				搜索您要的商品
			</view>
		</view>

		<view class="main between">
			<view class="left-side">
				<view class="side-list" v-for="(item, idx) in Rows" :key="idx">
					<view @tap="changeTab" :data-index="idx" :data-info="item" :style="
                            'background:' +
                            (idx == currIdx ? '#fff' : '#F8F8F8') +
                            ';color:' +
                            (idx == currIdx ? '#E3224F' : color) +
                            ';border-left:' +
                            (idx == currIdx ? '10rpx' : '0rpx') +
                            ' ' +
                            (idx == currIdx ? '#E3224F' : color) +
                            ' solid;'
                        " class="item">
						{{ item.Text }}
					</view>
				</view>
			</view>
			<view class="right-side">
				<!-- 二层 -->
				<view v-if="storetype == 2">
					<image mode="aspectFill" @tap="linkProList" :id="selectRow.id" class="banner-img"
						:src="null != selectRow ? selectRow.icon : '/static/file/images/default.png'"></image>
					<view class="picText-list wrap">
						<view :id="item.id" @tap="linkProList" class="item" v-for="(item, i) in RightRow" :key="i">
							<image mode="aspectFill" class="item-img"
								:src="item.icon ? item.icon : '/static/file/images/default.png'"></image>

							<text class="item-text">{{ item.Text }}</text>
						</view>
					</view>
				</view>

				<!-- 三层 -->
				<view v-else-if="storetype == 3">
					<image mode="aspectFill" class="banner-img"
						:src="selectRow.icon ? Ftypeimg : '/static/file/images/default.png'"></image>
					<view class="typeList" v-for="(item, idx) in RightRow" :key="idx">
						<view class="titleBar">{{ item.Text }}</view>

						<view class="picText-list wrap">
							<view :id="p.id" @tap="linkProList" class="item" v-for="(p, i) in item.children" :key="i">
								<image mode="aspectFill" class="item-img"
									:src="item.icon ? item.icon : '/static/file/images/default.png'"></image>

								<text class="item-text">{{ p.Text }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// pages/sort/sort.js
	var util = require('../../utils/util.js');
	var api = require('../../utils/prom.js');
	export default {
		data() {
			return {
				currIdx: 0,
				Rows: [],
				selectRow: null,
				RightRow: [],
				storetype: 2,
				color: '',
				i: '',
				Ftypeimg: '',

				p: {
					id: '',
					Text: ''
				}
			};
		}
		/**
		 * 生命周期函数--监听页面加载
		 */
		,
		onLoad: function(options) {
			var that = this;
			var storeType = uni.getStorageSync('storetype');
			if (util.isEmpty(storeType)) {
				storeType = 2;
			}
			that.storetype = storeType;
		},
		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.onShowClone3389();
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.onShowClone3389({});
			uni.stopPullDownRefresh();
		},
		/**
		 * 用户点击右上角分享
		 */
		//分享
		onShareAppMessage: function(res) {
			return {
				title: app.globalData.shareinfo.title,
				imageUrl: app.globalData.shareinfo.img,
				desc: app.globalData.shareinfo.desc,
				path: 'pages/index/index?Fid=' + uni.getStorageSync('uid')
			};
		},
		methods: {
			/**
			 * 生命周期函数--监听页面显示
			 */
			onShowClone3389: function() {
				var that = this;
				app.globalData.checkNetwork(function() {
					that.initData();
				});
			},

			// 跳查询页面
			search: function(e) {
				var that = this;
				uni.navigateTo({
					url: '/pages/searchPage/searchPage'
				});
			},

			initData: function() {
				var that = this;
				var param = {
					token: uni.getStorageSync('token')
				};
				api.requestAll('SpType', 'get', param, function(res) {
					console.log(res.data);
					if (res.data.length > 0) {
						res.data.map(function(item) {
							item.icon = util.changeMiddlepic(item.icon);
						});
					}
					that.Rows = res.data;
					if (that.Rows.length > 0) {
						var row = that.Rows[0];
						that.selectRow = row;
						that.RightRow = row.children;
						console.log(that.RightRow);
					}
				});
			},

			//切换一级菜单
			changeTab: function(e) {
				var that = this;
				var row = e.currentTarget.dataset.info;
				var index = e.currentTarget.dataset.index;
				that.currIdx = index;
				that.selectRow = row;
				that.RightRow = row.children;
			},

			// 跳转分类商品列表
			linkProList: function(e) {
				var that = this;
				var id = e.currentTarget.id;
				uni.navigateTo({
					url: '/pages/proList/proList?Ftypeid=' + id
				});
			}
		}
	};
</script>
<style>
	@import './sort.css';
</style>